<template>
  <div>
    <!-- 地图 -->
    <div class="map-display">
      <!-- 默认地址是天安门 -->
      <baidu-map class="myMap" :center="{lng: data.longitude || 116.404, lat: data.latitude || 39.915}" :zoom="16"> 
          <bm-marker :position="{lng: data.longitude || 116.404, lat: data.latitude || 39.915}"></bm-marker>
      </baidu-map>
      <!-- 地址显示 -->
      <div class="address-info">
        <!-- <img class="icon-address" src="/attenceManage/assets/imgs/address.png" mode="aspectFill"/> -->
        <van-icon name="location" size="20px" color="#0679FA" />
        <div class="address-text">{{data.locationAddress}}</div>
        <img class="icon-refresh" src="@/assets/images/refresh.png" @click="reLocation"/>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="*上班时间" value="9:00 ~ 18:00" />
      <van-cell title="选择时间" @click="data.showTimePicker = true" :value="(data.signDate.join('-') + ' ' + data.signTime.join(':')) || '请选择'"></van-cell>
      <van-cell title="选择地区" @click="data.showAreaPicker = true" :value="data.pickerText || '请选择'"></van-cell>
      <van-field name="stepper" label="步进器">
        <template #input>
          <van-stepper v-model="data.stepper" min="0" />
        </template>
      </van-field>
       <van-field
          v-model="data.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
    </van-cell-group>
    <!-- 内容 -->
    <div class="container">
      <card-title title="拍摄照片" desc="不超过5张" title-color="#333333">
        <div class="px24 pb24">
          <UploadImg v-model="data.fileList" />
        </div>
      </card-title>
      <card-title title="备注" desc="（不超过200字）" title-color="#333333">
        <div class="px24 pb24">
          <textarea class="textarea" placeholder="请输入备注信息" maxlength="200" placeholder-class="color-999" v-model="data.remark" />
        </div>
      </card-title>
    </div>

    <!-- 签到按钮 -->
    <div class="sign-container">
      <div class="sign-btn" @click="signIn">
        <div class="sign-text">签到</div>
        <div class="sign-time"><Timer v-model="data.time" ref='timer'/></div>
      </div>
     
    </div>
    <PickerDatetime v-model:show="data.showTimePicker" @confirm='(e) => data.signTime = e'></PickerDatetime>
    <Picker
      title="标题"
      show-toolbar
      v-model:show="data.showAreaPicker"
      :range="data.columns"
      @confirm="onPickerConfirm"
    />
  </div>
</template>

<script lang='ts' setup>
// @ is an alias to /src
import { showToast, showLoadingToast, PickerFieldNames } from 'vant';
import CardTitle from '@/components/CardTitle.vue'
import UploadImg from '@/components/UploadImg.vue'
import PickerDatetime from '@/components/PickerDatetime.vue'
import Timer from '@/components/Timer.vue'
import Picker from '@/components/Picker.vue'
import {reactive, onMounted, ref} from 'vue'
import imgs from '@/assets/images/camera.png'
// import Biz from '@/assets/js-plugin/biz.sdk.js'
let time = new Date()
const data = reactive({
  timer: null,
  time: '',
  signDate: [time.getFullYear() + '', time.getMonth()+1+'', time.getDate() + 1 +''],
  signTime: ['12', '00', '00'],
  showTimePicker: false,
  showAreaPicker: false,
  fileList: [
    imgs
  ],
  longitude: '',
  latitude: '',
  locationAddress: '',
  remark: '',
  columns:[{text:'杭州', value: 1}, {text: '宁波', value: 2}, {text: '温州', value: 3}],
  pickerText: '',
  stepper: 1,
  username: '',
})
const timer = ref()

onMounted(reLocation)

function reLocation () {
  let closeLoading  = showLoadingToast({
    message: '定位中...',
    forbidClick: true,
    duration: 3000,
  });
}

function onPickerConfirm(res: PickerFieldNames[]) {
  data.pickerText = res[0].text as string
}

// 点击签到
async function signIn() {
  showToast('签到成功')
  timer.value.confirm()
}

</script>

<style>

.myMap{
  width: 100%;
  height: 300px;
}
.address-info{
  padding: 20px 36px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: #FFFFFF;
}
.icon-address{
  width: 28px;
  height: 28px;
}
.icon-refresh{
  width: 36px;
  height: 36px;
  padding-left: 20px;
  object-fit: contain;
}
.address-text{
  flex: 1;
  font-size: 26px;
  color: #333;
  padding-left: 16px;
}
/* 内容 */
.container{
  padding: 24px 28px;
  height: auto;
}
/* 打卡历史 */
.records-container{
  padding: 12px 24px;
}
.resord-item{
  display: flex;
  align-items: center;
  padding: 12px 0;
}
.textarea{
  font-size: 26px;
  color: #333;
  height: 124px;
  padding: 26px;
  margin: 20px;
  width: calc(100% - 92px);
  resize: vertical;
  border-color: #c0bebe;
  border-radius: 8px;
}
/* 签到按钮 */
.sign-container{
  width: 100%;
  /* height: 260px; */
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  padding-bottom: 100px;
}
.sign-btn{
  width: 244px;
  height: 244px;
  border-radius: 50%;
  background-color: #2CB855;
  box-shadow: 0 0 32px 0 rgba(60, 212, 136, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #FFFFFF;
  padding: 20px;
}
.sign-time{
  word-wrap: break-word;
  text-align: center;
  white-space: nowrap;
  margin-top: 20px;
  font-size: 24px;
}
.sign-desc{
  font-size: 26px;
  color: #FDB205;
  text-align: center;
  padding: 24px 28px 0 28px;
}


.storeName {
    padding: 6px 30px;
    background-color: #FFFFFF;
    font-size: 28px;
    border: 2px solid #bbbbbb;
}

.van-cell {
    justify-content: space-between;
}

.van-cell__title {
    flex: .3 !important;
}
</style>